<template>
    <div class="content">
        <el-tabs v-model="activeName">
            <el-tab-pane v-for="tab in tabList" :key="tab.name" :label="tab.label" :name="tab.name">
                <ReportLayout v-if="activeName === tab.name" :selectApiUrl="tab.selectApiUrl" :selectApi="tab.selectApi"
                    :tableColumns="tab.tableColumns" :reportType="tab.name">
                </ReportLayout>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ReportRecordApiUrl, ReportRecordApi } from "@/api/order_manager/report_record"
import ReportLayout from './ReportLayout.vue'
import { ReportLabel, SelectDailyColumns, SelectMonthlyColumns, SelectTotalColumns } from "./ConfigData"

const tabList = [
    {
        label: "日报表",
        name: ReportLabel.日报表,
        selectApi: ReportRecordApi.SelectDaily,
        selectApiUrl: ReportRecordApiUrl.SelectDaily,
        tableColumns: SelectDailyColumns
    },
    {
        label: "月报表",
        name: ReportLabel.月报表,
        selectApi: ReportRecordApi.SelectMonthly,
        selectApiUrl: ReportRecordApiUrl.SelectMonthly,
        tableColumns: SelectMonthlyColumns
    },
    {
        label: "总报表",
        name: ReportLabel.总报表,
        selectApi: ReportRecordApi.SelectTotal,
        selectApiUrl: ReportRecordApiUrl.SelectTotal,
        tableColumns: SelectTotalColumns
    },
]
const activeName = ref(tabList[0].name)

</script>

<style lang="scss" scoped>
.content {
    padding: 0px 16px;
}
</style>